<template>
	<!--1.填写接入账号信息-->
	<div class="cont_one cont_tar" style="display: block">
		<div class="cont_one_view">
			<div class="cont_one_cont">
				<div class="cont_one_li">
					<div class="one_li_spanone"><span class="bt">*</span>作品名称：</div>
					<div class="li_kong">
						<input autocomplete="off" type="text" name="" id="title" value="" />
					</div>
				</div>
				<div class="cont_one_li">
					<div class="one_li_spanone"><span class="bt">*</span>作品类别：</div>
					<div class="one_li_spantwo">
						<div class="one_li_left">
							<Select v-model="workCategoryValue">
								<Option v-for="item in workCategory" :value="item.value" :key="item.value">{{ item.label }}</Option>
							</Select>
						</div>
						<div class="one_li_rigth" id="remark" style="display: none;">
							<span>类别说明：</span>
							<input autocomplete="off" type="text" maxlength="200" />
						</div>

					</div>
				</div>
				<div class="cont_one_li one_li_te">
					<div class="one_li_spanone"><span class="bt">*</span>著作权人：</div>
					<div class="li_list">
						<div id="ownerList">
							<!--<div class="one_li_usre">-->
							<!--<span class="one_li_text">【当前账号主体】I【类别】I【证件类型】I【证件号码】I【国籍/注册地】【国籍/注册地</span>-->
							<!--<span>编辑</span><span>|</span><span>删除</span>-->
							<!--</div>-->
						</div>
						<!--<div class="add_oneli" id="addOwner">添加著作权人</div>-->
						<div>
							<div class="add_oneli" id="addOwner" style="display: inline-block;background:#6081ff;">添加著作权人</div>
							<span class="add-calling-info" style="display: none;">最多只能同时添加10个著作权人</span>
						</div>
					</div>
				</div>

				<div class="cont_one_li">
					<div class="one_li_spanone">发布平台：</div>
					<div class="one_li_spantwo">
						<div class="one_li_left">
							<Select v-model="platformValue">
								<Option v-for="item in platformCategory" :value="item.value" :key="item.value">{{ item.label }}</Option>
							</Select>
							<!-- <select class="one_li_left" id="platform">
								<option value="" style="display: none"></option>
								<option value="1">微信公众号</option>
								<option value="2">今日头条</option>
								<option value="3">喜马拉雅</option>
								<option value="4">网易云课堂</option>
								<option value="5">百度传课</option>
								<option value="6">腾讯课堂</option>
								<option value="7">其他</option>
							</select> -->
						</div>
						<div class="one_li_rigth" id="platform_name" style="display: none;">
							<span>平台名称：</span>
							<input type="text" id='other_platform' />
						</div>

					</div>
				</div>
				<div class="cont_one_li">
					<div class="one_li_spanone">发布链接：</div>
					<div class="li_kong">
						<input type="text" name="" id="releaseUrl" value="" />
					</div>
				</div>
			</div>
			<div class="cont_one_btns">
				<div>
					<span class="cont_one_cancel" id="backCancel" @click="cancelBaseOne">取消</span>
					<span class="cont_one_next_step down_one next_step" target="cont_two" @click="confirmToTwo" id="next_step">下一步</span>
					<span class="cont_one_next_step " id="saveDir" @click="saveBaseOne">直接保存</span>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				workCategoryValue:'0',
				workCategory:[  //发布平台
					{
						value: '0',
						label: '全部'
					},
					{
						value: '1',
						label: '文字'
					},
					{
						value: '2',
						label: '口述'
					},
					{
						value: '3',
						label: '音乐'
					},
					{
						value: '4',
						label: '戏剧'
					},
					{
						value: '5',
						label: '曲艺'
					},
					{
						value: '6',
						label: '舞蹈'
					},
					{
						value: '7',
						label: '杂技'
					},
					{
						value: '8',
						label: '美术'
					},
					{
						value: '9',
						label: '建筑'
					},
					{
						value: '10',
						label: '摄影'
					},
					{
						value: '11',
						label: '电影'
					},
					{
						value: '12',
						label: '电视剧'
					},
					{
						value: '13',
						label: '其他类似摄制电影方法创作的作品'
					},
					{
						value: '14',
						label: '工程设计图、产品设计图'
					},
					{
						value: '15',
						label: '地图、示意图'
					},
					{
						value: '16',
						label: '模型'
					},
					{
						value: '17',
						label: '其他'
					},
				],
				platformValue:'0',
				platformCategory:[ //发布平台
					{
						value: '0',
						label: '全部'
					},
					{
						value: '1',
						label: '微信公众号'
					},
					{
						value: '2',
						label: '今日头条'
					},
					{
						value: '3',
						label: '喜马拉雅'
					},
					{
						value: '4',
						label: '网易云课堂'
					},
					{
						value: '5',
						label: '百度传课'
					},
					{
						value: '6',
						label: '腾讯课堂'
					},
					{
						value: '7',
						label: '其他'
					},
				],

			};

		},
		methods: {
			// 第一步取消
			cancelBaseOne(){
				this.$router.push({  //核心语句
					path:'/copyRight/warehouse',   //跳转的路径
					query:{           //路由传参时push和query搭配使用 ，作用时传递参数
						activeStatus:1 ,  
					}
				})
			},
			// 第一步直接保存
			saveBaseOne(){
				this.$router.push({  //核心语句
					path:'/copyRight/warehouse',   //跳转的路径
					query:{           //路由传参时push和query搭配使用 ，作用时传递参数
						activeStatus:1 ,  
					}
				})
			},
			// 第一步到第二步
			confirmToTwo() {
				//切换顶部的状态
				let statusValue = 'two';
				this.$emit("changestepstatus", statusValue);
			},
			// 切换菜单
			switchTopMenuList(platformCate, platformType) {
				this.chooseStatusValue = platformType; //当前选中状态
				this.choosePlatformType = platformCate; //当前选中平台
			},
		},

		beforeMount: function() {
			// console.log("47")
		},
		mounted: function() {
			// console.log("7777777777")
		},
	}
</script>

<style type="less">
	@import '../automaticAdd/automaticAdd.css';
	/* //填写接入账号信息 */
	.cont_one {
	    width: 100%;
	    font-size: 14px;
	}
	.cont_one_view {
		width: 100%;
		margin: 0 auto;
	}
	.cont_one_btns {
		width: 100%;
		height: 42px;
		margin-top: 95px;
		margin-bottom: 53px;
	}
	.cont_one_btns div {
		width: 480px;
		margin: 0 auto;
		height: 100%;
	}
	.cont_one_btns div span {
		display: inline-block;
		border-radius: 3px;
		line-height: 42px;
		text-align: center;
	}
	.cont_one_btns div .cont_one_cancel {
		width: 148px;
		height: 42px;
		background: rgba(255, 255, 255, 1);
		border: 1px solid rgba(227, 227, 227, 1);
		border-radius: 3px;
		cursor: pointer;
	}
	.cont_one_btns div .cont_one_last_step {
		width: 146px;
		height: 40px;
		background: rgba(255, 255, 255, 1);
		border: #E3E3E3 1px solid;
		color: #999;
	}
	.cont_one_btns div .cont_one_next_step {
		display: inline-block;
		width: 148px;
		height: 42px;
		background: rgba(96, 129, 255, 1);
		margin-left: 12px;
		color: #fff;
		cursor: pointer;
	}
	.cont_one_li {
		width: 100%;
		height: 36px;
		margin-top: 16px;
	}
	.cont_one_li div {
		display: inline-block;
		vertical-align: middle;
	}
	.cont_one_li .one_li_spanone {
		width: 290px;
		height: 36px;
		line-height: 36px;
		text-align: right;
	}
	.cont_one_li .li_list {
		width: 567px;
	}
	.one_li_usre {
		width: 567px;
		height: 36px;
		background: rgba(252, 252, 253, 1);
		margin-bottom: 4px;
	}
	.one_li_usre span {
		font-weight: 400;
		line-height: 36px;
		vertical-align: middle;
	}
	.one_li_usre .one_li_text {
		width: 458px;
		font-weight: 400;
		color: rgba(102, 102, 102, 1);
		line-height: 36px;
		overflow: hidden;
		display: inline-block;
		word-break: break-all;
		text-overflow: ellipsis;
		white-space: nowrap;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		margin-right: 15px;
	}
	.one_li_usre span:nth-child(2) {
		color: #6699FF;
	}
	.one_li_usre span:nth-child(3) {
		color: #333;
		margin: 0 5px;
	}
	.one_li_usre span:nth-child(4) {
		color: #E94747;
	}
	.one_li_spantwo {
		width: 567px;
		height: 36px;
	}
	.one_li_spantwo select{
		width: 146px;
	}
	.one_li_left {
		float: left;
		height: auto;
		position: relative;
		background: rgba(255, 255, 255, 1);
		/* border: 1px solid rgba(227, 227, 227, 1); */
		border-radius: 3px;
	}
	.one_category {
		display: inline-block;
		padding-left: 8px;
	}
	.xiala {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-left: 0px;
		width: 22px;
		height: 34px;
		background: rgba(240, 242, 248, 1);
		position: absolute;
		right: 0;
		top: 0;
		cursor: pointer;
		border-radius: 0 3px 3px 0;
	}
	.xiala i {
		width: 8px;
		height: 5px;
		display: block;
		background-image: url(/resources/account/img/downimg.png);
	}
	.one_name_la {
		display: none;
		position: absolute;
		top: 36px;
		left: -3px;
		right: 0;
		margin: auto;
		z-index: 500;
		width: 148px;
		background: rgba(255, 255, 255, 1);
		border: 1px solid rgba(227, 227, 227, 1);
		border-radius: 3px;
	}
	.one_name_la li {
		width: 100%;
		height: 34px;
		background-color: #FFF;
		cursor: pointer;
		position: relative;
	}
	.one_name_la li span:nth-child(1) {
		display: none;
		position: absolute;
		left: 0;
		top: 0;
		width: 4px;
		height: 34px;
		background: rgba(96, 129, 255, 1);
	}
	.one_name_la li span:nth-child(2) {
		padding-left: 15px;
		line-height: 34px;
		font-weight: 400;
		color: #666;
	}
	.one_name_la li:hover {
		background-color: rgba(240, 242, 248, 1);
	}
	.one_name_la .one_li_line {
		display: block;
	}
	.one_li_rigth {
		float: left;
		height: 36px;
		margin-left: 14px;
	}
	.one_li_rigth span {
		height: 36px;
		line-height: 36px;
		display: inline-block;
	}
	.one_li_rigth input {
		width: 327px;
		height: 34px;
		background: rgba(255, 255, 255, 1);
		border: 1px solid rgba(227, 227, 227, 1);
		border-radius: 3px;
		padding-left: 8px;
	}
	.li_kong {
		background: rgba(255, 255, 255, 1);
	}
	.li_kong input {
		width: 550px;
		height: 36px;
		padding-left: 8px;
		border: 1px solid rgba(227, 227, 227, 1);
		border-radius: 3px;
		outline: none;
	}
	.li_kong input:focus{
		border:1px solid  #6699FF;
	}
	.one_li_te {
		height: auto;
	}
	.one_li_te div {
		vertical-align: top;
	}
	.one_li_te .add_oneli {
		width: 124px;
		height: 36px;
		background: rgba(96, 129, 255, 1);
		border-radius: 3px;
		color: #fff;
		line-height: 36px;
		text-align: center;
		cursor: pointer;
	}
	.cont_one .cont_one_view .cont_one_li .one_li_spanone {
		width: 290px;
		height: 36px;
		line-height: 36px;
		text-align: right;
	}
	.cont_one .cont_one_view{
		width: auto;
	}
	.bt {
		color: red;
		display: inline-block;
		width: auto;
	}
</style>
